<template>
	<view class="layout" v-if="isShow">
		<view class="goBack" @click="goBack" :style="{top:(getStatusBarHeight()-2)+'px'}">
			<uni-icons type="back" color="#fff" size="20"></uni-icons>
		</view>
		<score-view :score="score" @tap="addScoreClick"></score-view>
		<view class="content">
			<view class="title">
				<view class="bg">
					<image src="../../static/bg_title.png" mode="aspectFill"></image>
					<image class="wallet" src="../../static/ic_wallet.png" v-if="false" mode="aspectFill"></image>
				</view>
				<view class="info" :style="{top:20+'px'}">
					<view class="title1">
						{{title}}
					</view>
					<view class="title2">
						{{itemNums}}次机会最高中奖金币数100万
					</view>
					<view class="title3">
						{{itemDetail.subtitle}}
					</view>

				</view>
			</view>

			<view class="winnums">
				<view class="items">
					<view class="item" v-for="item in openNums">
						<view class="winnum">
							{{item.num}}
						</view>
						<view class="znum">
							{{item.pinyin}}
						</view>
					</view>
				</view>
				<canvas v-if="!isShowWin" class="canvas1" id="canvas1" canvas-id="canvas1" @touchstart="touchstart"
					@touchmove="touchmove" @touchend="touchend"></canvas>
			</view>
			<view class="tip">
				<image src="../../static/ic_win_num.png" mode="aspectFill"></image>
				<view class="tip2">
					<image src="../../static/ic_my_num.png" mode="aspectFill"></image>
				</view>

			</view>
			<view class="usernums" :style="{ height : numHeight + 'rpx'}">
				<view class="items">
					<view class="item" v-for="item in userNums"
						:style="{ border: item.isWin && isShowWinNums ? '2px solid red' : 'none' }">
						<view class="winnum">
							{{item.num}}
						</view>
						<view class="znum">
							{{item.pinyin}}
						</view>
						<view class="money">
							￥{{item.money}}
						</view>
					</view>
				</view>
				<canvas v-if="!isShowWin" class="canvas2" id="canvas2" disable-scroll=true canvas-id="canvas2" @touchstart="touchstart2"
					@touchmove="touchmove2" @touchend="touchend2"></canvas>
			</view>
		</view>

		<view class="menuBar" v-if="!isGaming">
			<view class="group" :style="{opacity:menuState?1:0,transform:menuState?'scaleX(1)':'scaleX(0)'}">
				<view class="item" hover-class="hoverItem" @click="autoPlayClick">
					<uni-icons type="checkbox" size="26"></uni-icons>
					<view class="text">自动刮奖</view>
				</view>
		
				<view class="item" hover-class="hoverItem" @click="autoPlayClickTen">
					<uni-icons type="loop" size="26"></uni-icons>
					<view class="text">连刮10张</view>
				</view>
		
				<view class="item" hover-class="hoverItem" @click="refreshBtnSubmit">
					<uni-icons type="upload" size="26"></uni-icons>
					<view class="text">再来一张</view>
				</view>
		
				<view class="item" hover-class="hoverItem" @click="soundBtnClick">
					<uni-icons v-if="isOpenSound" type="mic" size="26"></uni-icons>
					<uni-icons v-if="!isOpenSound" type="micoff" size="26"></uni-icons>
					<view class="text">音效</view>
				</view>
			</view>
			<view class="close" @click="closeMenu">
				<uni-icons type="closeempty" size="20" color="#fff" v-if="menuState"></uni-icons>
				<uni-icons type="list" size="20" color="#fff" v-else></uni-icons>
			</view>
		</view>
	</view>

	<uni-popup ref="resultPopup" :is-mask-click="false" mask-background-color="rgba(0,0,0,0.8)">
		<view class="resultPopup">
			<view class="bg win" v-if="winMoney !== 0">
				<view class="text">{{'恭喜您中得'+winMoney+'奖励'}}</view>
			</view>
			<view class="bg loser" v-else>
				<view class="text">{{'机会只留给有准备的人，\n再试一次吧！'}}</view>
			</view>

			<!-- <view class="doubelBtn" @click="doubelBtnSubmit" v-if="winMoney !== 0 && winMoney <= 10000 && !isDouble">
				<button type="primary">奖励翻倍</button>
			</view> -->
			<view class="submitBtn" @click="onSubmit" v-if="winMoney !== 0 && winMoney <= 10000 && !isDouble">
				<button type="primary">再来一次</button>
			</view>
			<view class="submitBtnLose" @click="onSubmit" v-if="winMoney == 0">
				<button type="primary">再来一次</button>
			</view>
			<view class="close" @click="closeResult">
				<uni-icons type="close" color="#eee" size="40"></uni-icons>
			</view>
		</view>
	</uni-popup>

</template>
<template>
  <!-- 这里可以根据原来的代码逻辑添加对应的页面模板结构，例如展示各种数据、按钮等 -->
  <view>
    <text>{{title}}</text>
    <button @click="autoPlayClick">自动刮奖按钮</button>
    <button @click="soundBtnClick">关闭声音按钮</button>
    <!-- 其他各种页面元素的展示和交互组件根据原逻辑添加 -->
  </view>
</template>

<script>
  import {
    getStatusBarHeight,
    getNavBarHeight,
    rpxToPx,
    pxToRpx
  } from "@/utils/system.js";
  import {
    getTotalUserScore,
    getUserScoreFromCloud,
    saveUserTotalScoreToCloud,
    getUserScore,
    addUserScore,
    saveUserAddScoreToLocal,
    SignInGetScore,
    SignInGetScoreLocal
  } from '../../store/scoreManager.js';
  import {
    getOffMony,
    getOnMony,
    padZero,
    getPinyinWithNum,
    getRandomNum,
    getRandomNumExcepts
  } from '../../utils/random.js';
  import {
    getTodayDateString,
    getTodayMonthString
  } from '../../utils/common.js';

  export default {
    data() {
      return {
        title: '',
        titleHeight: 0,
        numHeight: 0,
        isShowWin: false,
        content: "刮开覆盖膜，如果任意一个“我的号码”与“中奖号码”相同，即可获得该“我的号码”下方所对应的金币。",
        tips: ' 设置奖项：￥10,000,000、￥5,000,000、￥2,000,000、￥1,000,000、￥500,000、￥100,000、￥50,000、￥10,000、￥1,000、￥500、￥200、￥100',
        openNums: [],
        userNums: [],
        viewWidth: 0,
        viewHeight: 0,
        score: 0,
        ctx: null,
        viewWidth2: 0,
        viewHeight2: 0,
        ctx2: null,
        points: [],
        points2: [],
        winPoints: 0,
        userPoints: 0,
        resultPopup: null,
        winMoney: 0,
        itemNums: 0,
        cost: -50,
        isDouble: false,
        videoAd: null,
        usertype: 0,
        itemtype: 0,
        isShow: false,
        itemWidth: 55,
        startX: 0,
        startY: 0,
        isShowWinNums: false,
        isSignup: false,
        menuState: true,
        isOpenSound: true,
        isGameFinish: false,
        isGaming: false,
        totalWinMoneys: 0,
        totalGameTimes: 0,
        isNoMonyes: false,
        timer: null,
        isMenuToolEnable: true,
        adType: 0,
        isGameReady: false,
        isNewUser: false
      };
    },
    onLoad(options) {
      this.itemDetail = JSON.parse(options.itemDetail);
      this.title = this.itemDetail.name;
      this.isNewUser = options.isNewUser;
      if (!this.itemDetail.title ||!this.itemDetail.cost) {
        uni.reLaunch({
          url: '/pages/detail/detail0' + '?title=平安喜乐'
        });
        return;
      }
      this.isShow = true;
      this.titleHeight = getStatusBarHeight() + 10;
      this.numHeight = pxToRpx(uni.getWindowInfo().screenHeight - getNavBarHeight()) - (350 + 200 + 50);
      this.itemNums = Math.floor(this.numHeight / 120.0) * 5;

      setTimeout(() => {
        this.creatNums();
      }, 1000);

      // 在页面onLoad回调事件中创建激励视频广告实例
      if (wx.createRewardedVideoAd) {
        this.videoAd = wx.createRewardedVideoAd({
          adUnitId: 'adunit-68d6f70cfd097fdb'
        });
        this.videoAd.onLoad(() => {});
        this.videoAd.onError((err) => {
          console.error('激励视频光告加载失败', err);
        });
        this.videoAd.onClose((res) => {
          // 用户点击了【关闭广告】按钮
          if (res && res.isEnded) {
            // 正常播放结束，可以下发游戏奖励
            if (this.adType === 1) {
              this.score = saveUserAddScoreToLocal(1000, 1);
            } else if (this.adType === 2) {
              this.score = saveUserAddScoreToLocal(this.winMoney, 99);
              this.isDouble = true;
            } else if (this.adType === 3) {
              const dayString = getTodayDateString();
              uni.setStorageSync("isEnableMenuTool" + this.title, dayString);
              this.isMenuToolEnable = true;
            }

          } else {
            if (this.adType === 1) {
              uni.showToast({
                title: '未获得奖励，每次完成广告观看可获得1000金币奖励',
                icon: "none",
                duration: 2000
              });
            } else if (this.adType === 2) {
              // 播放中途退出，不下发游戏奖励
              uni.showToast({
                title: '未获得奖励，观看完成可获得当前得奖的双倍奖励！',
                icon: "none",
                duration: 2000
              });
            } else if (this.adType === 3) {
              // 播放中途退出，不下发游戏奖励
              uni.showToast({
                title: '未获得奖励，仅观看一次广告，全天可用！',
                icon: "none",
                duration: 2000
              });
            } else {
              uni.showToast({
                title: '中途退出，未获得奖励！',
                icon: "none",
                duration: 2000
              });
            }
          }
        });
      }

      // 在页面onLoad回调事件中创建插屏广告实例
      if (wx.createInterstitialAd) {
        this.interstitialAd = wx.createInterstitialAd({
          adUnitId: 'adunit-1722f7e6276cc54a'
        });
        this.interstitialAd.onLoad(() => {});
        this.interstitialAd.onError((err) => {
          console.error('插屏广告加载失败', err);
        });
        this.interstitialAd.onClose(() => {});
      }
    },
    onShow() {
      // this.score.value = getTotalUserScore();
      this.score = getUserScore();
      this.loadHomeAd();
      // 获取音效开关
      this.isOpenSound = uni.getStorageSync("isOpenSound");
      const menuValueString = uni.getStorageSync("isEnableMenuTool" + this.title);
      const dayString = getTodayDateString();
      if (menuValueString && menuValueString === dayString) {
        this.isMenuToolEnable = true;
      } else {
        this.isMenuToolEnable = true;
      }
    },
    onBackPress(options) {
      // 点击虚拟键或者侧滑的时候触发（不允许返回）
      if (options.from === 'backbutton') {
        return true;
      }
      // 否则则允许返回
      return false;
    },
    mounted() {
      this.drawInit();
    },
    methods: {
      closeMenu() {
        this.menuState =!this.menuState;
      },
      autoPlayClick() {
        this.adType = 3;
        if (this.isMenuToolEnable === false) {
          if (this.videoAd) {
            this.videoAd.show().catch(() => {
              // 失败重试
              this.videoAd.load()
               .then(() => this.videoAd.show())
               .catch(err => {
                  console.error('激励视频 广告显示失败', err);
                  uni.showToast({
                    title: '广告拉取失败，请检查网络状况后重试',
                    icon: "none",
                    duration: 1500
                  });
                });
            });
          }
        } else {
          // 停止老的计时器
          if (this.timer) {
            clearInterval(this.timer);
          }
          if (this.isGameFinish === true) {
            if (this.isGameReady === false) {
              this.refreshBtnSubmit();
              setTimeout(() => {
                this.singleAutoPlay();
              }, 600);
            } else {
              this.singleAutoPlay();
            }
          } else {
            this.singleAutoPlay();
          }
        }
      },
      singleAutoPlay() {
        this.isGaming = true;
        let startX = 0;
        let startY = 0;
        this.timer = setInterval(() => {
          this.ctx.clearRect(startX, startY, 150, 150);
          this.ctx.draw(true);

          this.ctx2.clearRect(startX, startY, 150, 150);
          this.ctx2.draw(true);
          startX = startX + 50;

          if (startX >= pxToRpx(uni.getWindowInfo().screenWidth - 200)) {
            startY += 120;
            startX = 0;
          }
          if (pxToRpx(startY) >= this.numHeight) {
            clearInterval(this.timer);
            this.autoCheckShowAnwser();
            startX = 0;
            startY = 0;
            this.isGaming = false;
          }
        }, 50);
      },
      singleAutoPlayNotCheck() {
        let startX = 0;
        let startY = 0;
        this.timer = setInterval(() => {
          this.isShowWinNums = true;
          this.ctx.clearRect(startX, startY, 150, 150);
          this.ctx.draw(true);

          this.ctx2.clearRect(startX, startY, 150, 150);
          this.ctx2.draw(true);
          startX = startX + 50;

          if (startX >= pxToRpx(uni.getWindowInfo().screenWidth - 200)) {
            startY += 120;
            startX = 0;
          }
          if (pxToRpx(startY) >= this.numHeight) {
            clearInterval(this.timer);
            this.isGameFinish = true;
            this.isGameReady = false;
            this.totalWinMoneys += this.winMoney;
            this.winMoney = 0;
            this.isShowWinNums = true;
            startX = 0;
            startY = 0;
            this.tenTimesAutoPlayGame();
          }
        }, 50);
      },
      autoPlayClickTen() {
        this.adType = 3;
        if (this.isMenuToolEnable === false) {
          if (this.videoAd) {
            this.videoAd.show().catch(() => {
              // 失败重试
              this.videoAd.load()
               .then(() => this.videoAd.show())
               .catch(err => {
                  console.error('激励视频 广告显示失败', err);
                  uni.showToast({
                    title: '广告拉取失败，请检查网络状况后重试',
                    icon: "none",
                    duration: 1500
                  });
                });
            });
          }
        } else {
          this.isGaming = true;
          this.totalWinMoneys = 0;
          this.totalGameTimes = 0;
          if (this.timer) {
            clearInterval(this.timer);
          }
          this.tenTimesAutoPlayGame();
        }
      },
      tenTimesAutoPlayGame() {
        if (this.totalGameTimes!== 10) {
          this.totalGameTimes += 1;
          if (this.isGameFinish === true) {
            this.refreshBtnSubmit();
            // 判断是否没钱了
            if (this.isNoMonyes === false) {
              setTimeout(() => {
                this.singleAutoPlayNotCheck();
              }, 600);
            } else { //没钱提前结束游戏
              this.totalGameTimes = 10;
              this.isGaming = false;
              this.winMoney = this.totalWinMoneys;
              this.autoCheckShowAnwser();
            }
          } else {
            this.singleAutoPlayNotCheck();
          }
        } else {
          this.winMoney = this.totalWinMoneys;
          this.autoCheckShowAnwser();
          this.isGaming = false;
        }
      },
      soundBtnClick() {
        this.isOpenSound =!this.isOpenSound;
        uni.setStorageSync("isOpenSound", this.isOpenSound);
      },
      async autoCheckShowAnwser() {
        if (this.isOpenSound === true) {
          if (this.winMoney!== 0) {
            const innerAudioContext = uni.createInnerAudioContext();
            innerAudioContext.autoplay = false;
            innerAudioContext.src = "/static/audio/huanhu.mp3";
            innerAudioContext.play();
          } else {
            const innerAudioContext = uni.createInnerAudioContext();
            innerAudioContext.autoplay = false;
            innerAudioContext.src = "/static/audio/kexi.mp3";
            innerAudioContext.play();
          }
        }

        this.isShowWin = true;
        this.isShowWinNums = true;
        this.isGameFinish = true;
        this.isGameReady = false;
        setTimeout(() => {
          this.resultPopup.open();
          this.score = addUserScore(this.winMoney, this.itemtype);
        }, 1000);

      },
      goBack() {
        // drawInit();
        // 停止刮奖
        if (this.timer) {
          clearInterval(this.timer);
        }

        uni.navigateBack({
          success: () => {

          },
          fail: () => {
            uni.reLaunch({
              url: '/pages/index/shouye'
            });
          }
        });
      },
      doubelBtnSubmit() {
        this.adType = 2;
        if (this.videoAd) {
          this.videoAd.show().catch(() => {
            // 失败重试
            this.videoAd.load()
             .then(() => this.videoAd.show())
             .catch(err => {
                console.error('激励视频 广告显示失败', err);
                uni.showToast({
                  title: '广告拉取失败，请检查网络状况后重试',
                  icon: "none",
                  duration: 1500
                });
              });
          });
        }
      },
      loadHomeAd() {
        if (this.itemDetail.isShowAds === false) {
          return;
        }
        const key = "detail-AD" + this.itemDetail.type;
        const count = uni.getStorageSync(key);
        const day = getTodayDateString();
        if (count) {
          const c = count.split("--");
          if (c[0] === day) {
            if (Number(c[1]) < this.itemDetail.adTimes) {
              this.loadAD();
              uni.setStorageSync(key, day + "--" + (Number(c[1]) + 1));
            }
          } else {
            this.loadAD();
            uni.setStorageSync(key, day + "--" + 1);
          }
        } else {
          this.loadAD();
          uni.setStorageSync(key, day + "--" + 1);
        }
      },
	  }
	</script>

// <!-- // scss 语言类型  scoped css样式的类名仅限当前页面 不污染其它页面 -->
<style lang="scss" scoped>
	@font-face {
		font-family: NumFont;
		src: url('https://mp-02da6b36-ab1b-494d-b346-d6763fb77772.cdn.bspapp.com/resource/font/HONORSans-Bold.ttf');
	}


	.layout {
		width: 100%;
		height: 100vh;
		background-color: #ffe21d;
		position: relative;

		.goBack {
			position: fixed;
			margin-left: 10rpx;
			width: 38px;
			height: 38px;
			background: rgba(0, 0, 0, 0.5);
			border-radius: 50%;
			backdrop-filter: blur(10rpx);
			border: 1rpx solid rgba(255, 255, 255, 0.3);
			display: flex;
			align-items: center;
			justify-content: center;
			z-index: 1000;
		}

		.content {
			// width: 100%;
			height: calc(100vh - 40rpx);
			background-color: #de3018;
			margin-top: 0rpx;
			border: 20rpx solid #ffe21d;
			box-sizing: content-box;
			border-radius: 20px;
			overflow: hidden;
			position: relative;
			display: flex;
			align-items: center;
			flex-direction: column;

			.title {
				position: relative;
				width: 100%;

				.bg {
					position: absolute;
					top: 0rpx;
					left: 0rpx;
					width: 100%;
					height: 350rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.info {
					position: absolute;
					top: 0rpx;
					left: 0rpx;
					width: 100%;
					height: 350rpx;
					display: flex;
					align-items: center;
					flex-direction: column;

					.title1 {
						width: 100%;
						font-size: 110rpx;
						font-weight: bold;
						text-align: center;
						color: #ffe21d;
						// color: white;
					}

					.title2 {
						width: 80%;
						font-size: 18px;
						text-align: center;
						color: #de3018;
						background-color: #ffe21d;
						padding: 0 20rpx;
					}

					.title3 {
						width: 100%;
						margin-top: 20rpx;
						font-size: 14px;
						text-align: center;
						color: #ffe21d;
						padding: 0 20rpx;
					}
				}
			}

			.winnums {
				position: relative;
				margin-top: 370rpx;
				height: 186rpx;
				width: 95%;
				background-color: #d8d7d7;
				border: 10rpx solid #ffe21d;
				padding: 0 40rpx;

				.items {
					display: flex;
					align-items: center;
					justify-content: space-between;
					flex-direction: row;
					width: 100%;
					height: 100%;

					.item {
						width: 150rpx;
						height: 150rpx;
						background-color: #d1d0d0;
						border-radius: 50%;

						.winnum {
							width: 100%;
							margin-top: 30rpx;
							font-size: 60rpx;
							text-align: center;
							color: #efefef;
							font-family: 'NumFont';
							font-weight: bold;
							-webkit-text-stroke: 1px black;
						}

						.znum {
							width: 100%;
							font-size: 18rpx;
							text-align: center;
							color: black;
							margin-top: -10rpx;
						}
					}
				}

				.canvas1 {
					position: absolute;
					left: 0;
					top: 0;
					width: 100%;
					height: 100%;
				}
			}

			.tip {
				margin-left: 29rpx;
				width: calc(100vw - 44rpx);
				height: 50rpx;
				display: flex;
				justify-content: space-between;

				image {
					width: 178rpx;
					height: 39rpx;
				}

				.tip2 {
					width: 178rpx;
					height: 39rpx;
					margin-right: 31rpx;

					image {
						margin-top: 12rpx;
						width: 178rpx;
						height: 39rpx;
					}
				}
			}

			.usernums {
				position: relative;
				width: 95%;
				background-color: #d8d7d7;
				border: 10rpx solid #ffe21d;

				.items {
					width: 100%;
					display: grid;
					grid-template-columns: repeat(5, 1fr);
					row-gap: 10rpx;
					column-gap: 20rpx;
					padding: 5rpx;

					.item {
						width: 110rpx;
						height: 110rpx;
						// background-color: #d1d0d0;
						border-radius: 50%;
						padding: 2rpx;

						.winnum {
							margin-top: 10rpx;
							font-size: 50rpx;
							text-align: center;
							color: #efefef;
							font-weight: bold;
							-webkit-text-stroke: 1px black;
							font-family: 'NumFont';
						}

						.znum {
							font-size: 16rpx;
							text-align: center;
							color: black;
							margin-top: -5rpx;
						}

						.money {
							font-size: 20rpx;
							text-align: center;
							color: black;
							font-weight: bold;
							margin-top: 0rpx;
						}
					}
				}

				.canvas2 {
					position: absolute;
					left: 0;
					top: 0;
					width: 100%;
					height: 100%;
				}

			}

		}

		
		.menuBar {
			z-index: 100;
			position: fixed;
			bottom: 20px;
			right: 50%;
			transform: translateX(50%);
			display: flex;
			align-items: center;
			flex-direction: row;
			.group {
				display: grid;
				grid: auto-flow / 1fr 1fr 1fr 1fr;
				gap: 30rpx;
				transition: 0.3s;
				transform-origin: right center;
		
				.item {
					background: #ffe21d;
					width: 100rpx;
					height: 100rpx;
					border-radius: 50%;
					border: 2px solid #de3018;
					display: flex;
					align-items: center;
					justify-content: center;
					flex-direction: column;
					box-shadow: 0 0 15rpx rgba(0, 0, 0, 0.6);
					.text {
						margin-top: -5rpx;
						font-size: 23rpx;
						transform: scale(0.85);
					}
				}
		
				.hoverItem {
					transform: scale(0.95);
				}
			}
		
			.close {
				width: 70rpx;
				height: 70rpx;
				background: rgba(0, 0, 0, 0.9);
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-bottom: 0rpx;
				line-height: 1em;
				margin-left: 20px;
			}
		}
	}


	.resultPopup {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-bottom: 150rpx;

		.bg {
			background: no-repeat center;
			background-size: cover;
			position: relative;
		}

		.win {
			width: 735rpx;
			height: 986rpx;
			background-image: url('https://mp-02da6b36-ab1b-494d-b346-d6763fb77772.cdn.bspapp.com/resource/image/bg_win_2.png');
			background-size: 500rpx 655rpx;

			.text {
				line-height: 120rpx;
				text-align: center;
				position: absolute;
				width: 100%;
				top: 605rpx;
				left: 0;
				color: #fff;
				font-size: 46rpx;
				font-weight: bolder;
			}
		}

		.loser {
			width: 735rpx;
			height: 986rpx;
			background-image: url('https://mp-02da6b36-ab1b-494d-b346-d6763fb77772.cdn.bspapp.com/resource/image/bg_lose_2.png');
			background-size: 500rpx 605rpx;

			.text {
				line-height: 80rpx;
				text-align: center;
				position: absolute;
				padding: 0 160rpx;
				width: 100%;
				top: 545rpx;
				left: 0;
				color: #fff;
				font-size: 40rpx;
				font-weight: bolder;
			}
		}

		.submitBtn {
			width: 30%;
			margin-top: 40rpx;
			border-radius: 10rpx;

			button {
				background: transparent;
				font-size: 25rpx;
			}
		}

		.submitBtnLose {
			width: 60%;
			margin-top: -160rpx;

			button {
				background: #ee4626;
			}
		}

		.doubelBtn {
			width: 60%;
			margin-top: -160rpx;

			button {
				background: #F5D54D;
				color: #F5514d;
			}
		}

		.close {
			position: absolute;
			margin-left: 10rpx;
			width: 38px;
			height: 38px;
			// background: rgba(0, 0, 0, 0.5);
			border-radius: 50%;
			backdrop-filter: blur(10rpx);
			// border: 1rpx solid rgba(255, 255, 255, 0.3);
			display: flex;
			align-items: center;
			justify-content: center;
			z-index: 1000;
			right: 100rpx;
			top: 200rpx;
		}
	}

	.footer {
		position: fixed;
		width: 80rpx;
		height: 80rpx;
		bottom: 50rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		image {
			width: 80rpx;
			height: 80rpx;
		}
	}
</style>